<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      /* 核心：通过视口宽度动态设置 rem */
      html {
        /* 1920px 设计稿下，1rem = 12px → 12px / 1920px = 0.625vw */
        font-size: 0.625vw;

        /* 设置最小/最大字体（可选） */
        font-size: clamp(12px, 0.625vw, 24px);
      }
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }

      .dashboard {
        width: 90vw; /* 直接依赖视口宽度 */
        height: 80vh; /* 直接依赖视口高度 */
        margin: 5vh auto; /* 上下边距为视口高度的 5% */
        background: #f0f0f0;
        padding: 2rem; /* 内边距按 rem 缩放 */
      }

      .chart-container {
        width: 100%;
        height: 60vh; /* 直接依赖视口高度 */
        background: #2a2a2a;
        margin-bottom: 1.5rem; /* 按 rem 缩放 */
      }

      .info-box {
        width: 100%;
        padding: 1rem; /* 按 rem 缩放 */
        background: #fff;
        border-radius: 0.5rem; /* 按 rem 缩放 */
      }

      .info-text {
        font-size: 1.2rem; /* 按 rem 缩放（设计稿 14.4px） */
        color: #333;
      }
    </style>
  </head>
  <body>
    <div class="dashboard">
      <div class="chart-container"></div>
      <div class="info-box">
        <p class="info-text">当前数据：2023</p>
      </div>
    </div>
  </body>
</html>
